/* 导入组件
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\pages\QuotaManage\QuotaImport\List\components\ImportExcel.tsx
 * @Date: 2021-09-18 14:51:27
 * @LastEditTime: 2021-09-18 15:02:21
 */

import { Button, Col, message, Row, Select, Spin, Upload } from 'antd'
import React, { createRef } from 'react'
import toDoApis from '@/apis/TodoList'
import { downBlobFile, getOssFileKey } from '@/utils/methods'
import { http, UdTable } from '@/lib'
import QuotaApprove from '@/components/getQuotaApprove'
import './approve.scss'
import ossHttp from '@/utils/oss'
import TextArea from 'antd/lib/input/TextArea'
import apis from '@/apis/CustomerManage'
const { Option } = Select

export default class ImportExcel extends React.Component<any> {
  private cRef = createRef<any>()
  private remarkRef = createRef<any>()
  state = {
    loading:false,
    fileList: [],
    downloading: false,
    workFlowList: [],
    checkPerson: [],
    uploading: false,
    RightsRegisterDict:[],
  }

  componentDidMount() {
    // this.getWorkFlow()
    this.getRightsRegisterDict()
  }

  //上传前操作
  private beforeUpload = file => {
    if (this.state.fileList.length === 0) {
      const fileItem = {
        file,
        uid: file.uid,
        name: file.name,
        status: 'uploading',
        url: '',
      }
      ossHttp.put('settled-review/annex', file).then(res => {
        fileItem.url = res.url
        fileItem.status = 'done'
        this.setState(state => ({
          fileList: [...state['fileList'], fileItem],
        }))
      })
    } else {
      message.error('只能上传一个文件')
    }
    return false
  }

  //删除文件
  private onRemove = file => {
    let fileList = this.state.fileList
    fileList = fileList.filter(fileItem => fileItem.uid !== file.uid)
    this.setState({ fileList: fileList }, () => {
      return true
    })
  }

  private getRightsRegisterDict = () => {
    this.setState({loading:true})
    http.get(apis.getRightsRegisterDict)
    .then(res=>{
      const {data}  =res
      this.setState({ RightsRegisterDict: data })
    })
    .finally(()=>{
      this.setState({ loading: false })
    })
  }

  //获取审批角色
  private getWorkFlow = () => {
    http
      .get(toDoApis.getRightsAndInterestsImportNextApprove, { params: { brandCode: this.props.brandCode } })
      .then(res => {
        const { data } = res
        this.setState({ workFlowList: data })
      })
  }

  //选择审批人
  private handShowQuotaApprove(index) {
    this.cRef.current.handelCeck(index)
  }

  private handGetPerson(value) {
    this.setState({ checkPerson: value })
  }

  private onOk = e => {
    const { fileList } = this.state
    if (fileList.length === 0) {
      message.warn('请选择导入文件')
      return false
    }
    // if (this.state.checkPerson.length === 0) {
    //   message.warn('请选择审批人')
    //   return false
    // }
    this.setState({ uploading: true })
    e.drawerBtnLoading()
    const remarks = this.remarkRef.current.state.value
    const formData = new FormData()
    formData.append('file', fileList[0].file)
    let params: any = { remarks }
    // params['workflowReqVos'] = {
    //   name: 'candidateUsers',
    //   userId: [this.state.checkPerson[0].id],
    // }
    params['quotaApplyDetailFileRespVoList'] = [{ name: fileList[0].name, url: fileList[0].url }]
    formData.append('excelFileReqVo ', new Blob([JSON.stringify(params)], { type: 'application/json' }))
    http
      .post(apis.importExcel, formData, { timeout: 1000 * 60 * 10 })
      .then(() => {
        message.success('操作成功')
        e.close()
      })
      .catch(() => {
        e.drawerBtnLoadingHide()
      })
      .finally(() => {
        this.setState({ uploading: false })
      })
  }

  render() {
    const columns: any[] = [
      ['序号', 'id', (text, record, index) => index + 1, { minWidth: '30px' }],
      { title: '编码', dataIndex: 'code', minWidth: '50px' },
      { title: '名称', dataIndex: 'name', minWidth: '100px' },
      { title: '创建时间', dataIndex: 'createTime', minWidth: '100px' },
    ]
    const { RightsRegisterDict, loading } = this.state
    return (
      <Spin
        spinning={this.state.uploading || this.state.downloading}
        tip={this.state.uploading ? '上传中，请稍后...' : '下载中，请稍后...'}
      >
        <Row type="flex" justify="start" style={{ marginTop: 20 }}>
          <Col span={3} style={{ textAlign: 'right', fontSize: '12px', color: '#666' }}>
            <span className="ant-form-item-required">导入文件：</span>
          </Col>
          <Col span={20}>
            <Upload
              showUploadList={true}
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              fileList={this.state.fileList}
              beforeUpload={file => this.beforeUpload(file)}
              onRemove={file => this.onRemove(file)}
            >
              <Button type="primary">上传文件</Button>
            </Upload>
          </Col>
        </Row>
        <Row type="flex" justify="start" style={{ marginTop: 20,marginBottom:20 }}>
          <Col span={3} style={{ textAlign: 'right', fontSize: '12px', color: '#666' }}>
            备注：
          </Col>
          <Col span={20}>
            <TextArea rows={3} maxLength={200} ref={this.remarkRef} />
          </Col>
        </Row>
        <UdTable rowKey="id" columns={columns} dataSource={RightsRegisterDict} loading={loading} />
        {/* <Row type="flex" justify="start" style={{ marginTop: 20 }}>
          <Col span={3} style={{ textAlign: 'right', fontSize: '12px', color: '#666' }}>
            审批流程：
          </Col>
        </Row>
        <div className="approve-wrap">
          <div className="node-name-wrap">
            <div className="approve-title">节点名称：</div>
            <span className="circle-point"></span>
            <div>{this.state.workFlowList[0]?.nodeName || '暂无流程模板'}</div>
          </div>
          <div className="person-name-wrap">
            <div className="approve-title">审批人:</div>
            <div
              className={this.state.checkPerson[0]?.realName ? 'add-plus-name' : 'add-plus'}
              onClick={() => {
                this.state.workFlowList[0] ? this.handShowQuotaApprove(0) : (() => {})()
              }}
            >
              {this.state.checkPerson[0]?.realName || '+'}
            </div>
          </div>
        </div>
        <QuotaApprove
          handCilck={this.handGetPerson.bind(this)}
          cRef={this.cRef}
          ids={this.state.workFlowList[0]?.roleIds}
        /> */}
      </Spin>
    )
  }
}
